//页面加载完成
$(function () {
    //全局变量
    word="";
    $("#ss").click(function(){
        $(".container").html("");
        word=$("#sele").val();
        getdata(word);
    });
})
function getdata(){
    $.ajax({
        url: "http://api.tianapi.com/caipu/index?key=08b44ac28792327bd267e27f49c03e1d&word="+word, // 请求路径
        type: "GET", //请求方式
        //请求成功之后的回调
        success: function (data) {
            console.log(data);
            //定义一个变量保存需要拼接的html代码
            var html = "";
            // 遍历数据列表 把每项新闻数据组装成html代码
            $.each(data.newslist, function (index, item) {
                //通过${}把js的变量跟html代码拼接在一起
                html += `
                    <div class="card" >
                        <div class="box">
                        <h1>${item.cp_name}</h1>
                        <h2>做法如下</h2>
                            <h3>${item.zuofa}</h3>
                            <div class="sourse-content">
                                <h2>调料：${item.tiaoliao}</h2>
                                <h2>原料${item.yuanliao}</h2>
                            </div>
                        </div>
                    </div>
                    `

                      //判断搜索内容
                    if(item.zuofa !==undefined){
                        $(".container").append(html)
                    }
                    else{
                        alert("没有这个菜的做法");
                    }
            })

           
        },//响应成功后的回调函数
        //表示如果请求响应出现错误，会执行的回调函数
        error: function () {
            alert("出错啦...")
        },
        dataType: "json"//设置接受到的响应数据的格式 text 普通的文本字符串
    });
}